<script setup lang="ts">
const props = defineProps<{
  id: string
  status: string
  picture: string
  score: string
  title: string
}>()

function getTagName() {
  if (props.status === '1')
    return '待核销'
  else if (props.status === '2')
    return '已核销'
  else if (props.status === '3')
    return '已过期'
}

function getTagColor() {
  if (props.status === '1')
    return 'text-#4999F7'
  else if (props.status === '2')
    return 'text-#4BD032'
  else if (props.status === '3')
    return 'text-#BDBDBD'
}
</script>

<template>
  <view class="mb-24rpx rounded-20rpx bg-white p-24rpx">
    <view class="flex items-center justify-between">
      <view class="flex items-baseline">
        <view class="text-28rpx text-#333333 leading-40rpx">
          编号
        </view>
        <view class="text-32rpx text-#333333 font-semibold leading-45rpx">
          {{ id }}
        </view>
      </view>
      <view class="text-28rpx font-semibold leading-40rpx" :class="[getTagColor()]">
        {{ getTagName() }}
      </view>
    </view>
    <Spacer height="24" />
    <Divider width="654" color="#E6E6E6" />
    <Spacer height="24" />
    <view class="flex items-center">
      <uv-image
        width="250rpx"
        height="250rpx"
        radius="24rpx"
        :src="picture"
      >
        <template #loading>
          <uv-loading-icon color="#666666" />
        </template>
      </uv-image>
      <Spacer width="16" />
      <view class="h-250rpx flex flex-col justify-between">
        <view class="text-32rpx text-#333333 font-medium leading-48rpx">
          {{ title }}
        </view>
        <view class="flex items-center justify-between rounded-15rpx from-#96CCFA bg-gradient-to-r px-17rpx py-13rpx">
          <view class="text-40rpx text-#1B85FF leading-56rpx">
            {{ score || '0' }}积分
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
